<template>
  <div class="echarts" :class="{ 'g-glossy-firefox': isFirefox }">
    <mci-chart-legend v-if="isShowLegend && !hideLegend(option)" :option="option" class="w-full absolute z-100" :legend-clickable="legendClickable" @click="onLegendClick" />
    <e-charts
      v-if="paintFlag"
      ref="charts"
      autoresize
      class="echarts-el"
      v-bind="$attrs"
      :option="option"
      :init-options="initOptions"
    />
    <slot name="legend"></slot>
  </div>
</template>

<script setup lang="ts">
import ECharts from 'vue-echarts';
import { isArray } from 'microconnect-common/utils/is';
import { PropType } from 'vue';
import type { EChartOption } from 'echarts';
import useLegend from './Legend/useLegend';
import { MciChartLegend } from './Legend';

const props = defineProps({
  // 初始化options
  option: {
    type: Object as PropType<EChartOption>,
    default: () => ({})
  },
  // 初始化initOptions
  initOptions: {
    type: Object,
    default: () => ({ renderer: 'svg' })
  },
  // 数据变更绑定的options
  updateOption: {
    type: Object,
    default: () => ({})
  },
  legendClickable : {
    type: Boolean,
    default: true
  },
  customLegendClickHandler:{
    type: Boolean,
    default: false
  },
  isShowLegend:{
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['click-legend']);

const charts = ref(null as TNullable<any>);
const paintFlag = ref(true);

const getOption = (option: echarts.EChartOption) => {
  const data = ['', '', '', '', '', ''];
  let { xAxis } = option;

  // 设置空数据 xAxis 设置
  const setEmptyXAxis = (xAxisOption: echarts.EChartOption.XAxis) => {
    if (xAxisOption) return Object.assign(xAxisOption, { data });
    return { data };
  };

  if (isArray(xAxis)) {
    xAxis = xAxis.map((item) => {
      if (item.data?.length === 0) item = setEmptyXAxis(item);
      return item;
    });
  } else {
    if (xAxis) {
      if (xAxis.data) {
        if (xAxis.data.length === 0) xAxis = setEmptyXAxis(xAxis);
      } else {
        xAxis = setEmptyXAxis(xAxis);
      }
    }
  }

  return {
    ...option,
    xAxis
  };
};

watch(
  () => props.updateOption,
  (option) => {
    nextTick(() => {
      if (charts.value) {
        charts.value.clear();
        charts.value.setOption(getOption(option));
      }
    });
  },
  { deep: true, immediate: true }
);

const repaint = async () => {
  paintFlag.value = false;
  await nextTick();
  paintFlag.value = true;
};

const isFirefox = computed(() => window.navigator.userAgent.includes('Firefox'));

const { hideLegend } = useLegend();
const onLegendClick = ( hiddenSeriesNames: string[]) => {
  if (props.customLegendClickHandler) {
    return emit('click-legend', hiddenSeriesNames);
  }

  const series = props.option?.series?.filter((item) => !hiddenSeriesNames.includes(item.name ?? ''));
  if (charts.value) {
    charts.value.clear();
    charts.value.setOption(getOption({ ...props.option, series }));
  }
};

defineExpose({ repaint, charts, paintFlag });
</script>

<style lang="scss">
.echarts {
  position: relative;
  .echarts-el {
    height: 100%;
  }

  .echarts-tooltip {
    background: var(--color-fill-3) !important;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(36px);
    backdrop-filter: blur(36px);
    font-size: 12px !important;
    line-height: 20px !important;
    padding: 8px !important;
    display: none;
    border-radius: 4px;
  }

  &.g-glossy-firefox {
    .echarts-tooltip {
      color: hwb(24 23% 7%);
      background-color: var(--color-black-036) !important;
    }
  }
}
</style>
